<template>
  <div class="c_recruit_company_detail">
    <!-- <el-breadcrumb separator=">" class="breadcrumb-box">
      <el-breadcrumb-item :to="'/vip/c_recruit_detail?id='+backId">{{$t('common.nav.recruit')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('recruit.QyDetail')}}</el-breadcrumb-item>
    </el-breadcrumb> -->
    <div class="location" v-if="type == 0">
      <router-link to="/c_recruit_list">{{$t('common.nav.recruit')}}</router-link> >
      <router-link :to="'/vip/c_recruit_detail?id='+backId">{{$t('recruit.JobDetail')}}</router-link> >
      {{$t('recruit.QyDetail')}}
    </div>

    <div class="location" v-if="type == 1">
      <router-link to="/cooperation">{{$t('common.nav.cooperation')}}</router-link> >
      <router-link to="/cooperation_list?type=2">{{$t('news.joinCompany')}}</router-link> >
      {{$t('recruit.QyDetail')}}
    </div>

    <div class="content-box" v-if="resData">
        <div class="sectiona">
          <template v-if="resData.attachmentList">
            <span :key="index" v-for="(item,index) in resData.attachmentList" >
              <img :src="imgUrl+item.path" v-if="item.belongType==1">
            </span>
          </template>
            
            <div class="sectiona-right">
              <p>{{resData.enterpriseName || ''}}<span>{{resData.statusTxt}}</span></p>
              <el-breadcrumb separator="|" class="breadcrumb-box">
                  <el-breadcrumb-item v-if="resData.corporateTypeTxt && resData.corporateTypeTxt!=''">{{resData.corporateTypeTxt}}</el-breadcrumb-item>
                  <el-breadcrumb-item v-if="resData.lawPerson && resData.lawPerson!=''">{{$t('common.company.companyLegal')}}：{{resData.lawPerson}}</el-breadcrumb-item>
                  <el-breadcrumb-item v-if="resData.staffNumberTxt && resData.staffNumberTxt!=''">{{resData.staffNumberTxt}}{{$t('common.tips.people')}}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
        </div>

        <div class="sectionb">
            <div class="sectionb_title">
                <span>{{$t('common.company.companyBrief')}}</span>
            </div>
            <div class="mt20 mb40">
              <el-input type="textarea" class="new" v-model="resData.enterpriseProfile" autosize disabled></el-input>
            </div>
            
        </div>
        <!-- 企业基本信息 -->
        <div class="sectionb">
            <div class="sectionb_title">
                <span>{{$t('common.company.companyInfo2')}}</span>
            </div>
            <div class="sectionb-box-detail">
                <div class="sectionb-box-detail_item">
                    <p>{{$t('common.company.companyName')}}：<span>{{resData.enterpriseName}}</span></p>
                    <p>{{$t('common.company.companyCode')}}： <span>{{resData.uscc}}</span></p>
                    <p>{{$t('common.company.companyLegal')}}：<span>{{resData.lawPerson}}</span></p>
                </div>
                <div class="sectionb-box-detail_item">
                    <p>{{$t('common.company.companyCapital')}}： <span>{{resData.registeredCapital}}</span></p>
                    <p>{{$t('common.company.companyDate')}}：<span>{{resData.establishmentDate}}</span></p>
                    <p>{{$t('common.company.companyType')}}：<span>{{resData.corporateTypeTxt}}</span></p>
                </div>
                <div class="sectionb-box-detail_item">
                    <p>{{$t('common.company.companyEmployees')}}：<span>{{resData.staffNumberTxt}} {{$t('common.tips.people')}}</span></p>
                    <p>{{$t('common.company.companyIntellectual')}}：<span>{{resData.ipcount}} {{$t('common.company.companytask1')}}</span></p>
                </div>
                 <div class="sectionb-box-detail_item">
                    <p class="width100">{{$t('common.resume.belongJob')}}：<span>{{resData.industryTxt}}</span></p>
                </div>
                <div class="sectionb-box-detail_item">
                    <p class="width100">{{$t('recruit.QyAddress')}}：<span>{{resData.address}}</span></p>
                </div>
                <div class="sectionb-box-detail_item bk mbt15">
                    <p class="width100">
                      <span class="h99">{{$t('common.company.companyBusiness')}}：{{resData.enterpriseInfo}}</span>
                    </p>
                </div>
                 <div class="sectionb-box-detail_item">
                   <p class="p-tag">
                        {{$t('common.company.companyTags')}}：
                         <el-tag class="tag-item" :key="index"
                    v-for="(tag,index) in resData.enterpriseTagTxt">{{tag}}</el-tag>
                    </p>
                </div>
            </div>
        </div>
        <!-- 企业资质 -->
        <div class="sectionb" v-if="resData.qualificationInformationList && resData.qualificationInformationList.length>0 && resData.qualificationInformationList[0].path">
          <div class="sectionb_title">
              <span>{{$t('common.company.companyQualification')}}</span>
          </div>
          <p class="p-tag mt15" 
            :key="index"
            v-for="(item,index) in resData.qualificationInformationList"
            >
              <img :src="imgUrl+item.path" alt="" class="zz">
          </p>
        </div>
        <!-- 核心技术与产品方向 -->
        <div class="sectionb">
            <div class="sectionb_title">
                <span>{{$t('common.company.companyDirection')}}</span>
            </div>
            <div :key="index"
              v-for="(item,index) in resData.technologyDirectionList" class="pl10">
              <h2><b>{{item.name}}</b></h2>
              <el-input type="textarea" class="new" v-model="item.description" autosize disabled></el-input>
            </div>
          
            <div class="p-tag pl10">
                {{$t('common.detail.productTags')}}：
                <el-tag class="tag-item" :key="index" v-for="(tag,index) in resData.productTagTxt">{{tag}}</el-tag>
            </div>
         
        </div>
    </div>
  </div>
</template>
<script>
import { ajax, ajaxAdd } from '@/utils/js.js';
import {enterpriseNewJob,getEnterpriseDetail,getEnterpriseWallDetails } from '@/services/api.js';
const log = console.log;

export default {
  data() {
    return {
      backId:'',
      id:'',
      status:'',
      resData: "",
      imgUrl: this.$store.state.imgUrl,
      type:''
    };
  },
  mounted() {
    
    console.log(this.$route.query.id)
    this.id = this.$route.query.id 
    this.backId=this.$route.query.backId;
    this.type = this.$route.query.type;
    this.status = this.$route.query.status;
    if(this.$store.state.userInfo){
      this.imgUrl=this.$store.state.imgUrl;
    }

    this.content();
  },
  watch: {
    "$i18n.locale"() {
      this.content();
    },
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    content() {
      let url
      let type = this.$route.query.type; //0-职位招聘中的企业详情，1-入住企业的详情
      if(type == 0){
        url = getEnterpriseDetail
      }else{
        url = getEnterpriseWallDetails
      }
      ajax(this, url, {enterpriseId: this.id}, res => {
         if(res.data){
          for(var i=0;i<res.data.technologyDirectionList.length;i++){
            var item =res.data.technologyDirectionList;
            if(item[i].technologyTagTxt){
                item[i].technologyTagTxt=item[i].technologyTagTxt.split(',');
            }
          }
          if(res.data.enterpriseTagTxt.length>0){
            res.data.enterpriseTagTxt=res.data.enterpriseTagTxt.split(',');
          }else{
            res.data.enterpriseTagTxt=[];
          }
          if(res.data.productTagTxt.length>0){
            res.data.productTagTxt=res.data.productTagTxt.split(',');
          }else{
            res.data.productTagTxt=[];
          }
        }
        this.resData=res.data;
      });
    },
    saveReq() {
      let data = this.postData();
      data.status = '0'
      ajaxAdd(this, enterpriseNewJob, data, (res) => {
		  this.$router.back(-1)
	  });
    },

    backTap() {
      this.$router.back(-1)
    }
  },
};
</script>
<style lang="scss">
.p-tag{margin: 10px 0 15px !important;}
.mt20{
  margin-top:20px;
}
.mt40{
  margin-top:40px!important;
}
.mb40{
  margin-bottom:40px!important;
}
.mb10{
  margin-bottom:10px!important;
}
.pl10{
  padding-left: 10px;
}
.mt15{
  margin-top:15px;
}
 .width100{
    width: 100%!important;
  }
.c_recruit_company_detail{
 
  .el-breadcrumb__inner a, 
  .el-breadcrumb__inner.is-link{
    font-weight: 400; 
    color: #606266;
  }
  width:1200px;
  box-sizing: border-box;
  margin: 10px auto;
  .breadcrumb-box>.el-breadcrumb__inner{
    font-size:13px;
    font-family:Microsoft YaHei;
    font-weight:400;
    line-height:17px;
    color:rgba(153,153,153,1);
  }
  
  .content-box{
    padding: 28px 30px;
    background:rgba(255,255,255,1);
    border-radius: 5px;
    margin-top: 10px;
    .sectiona{
      img{
        width: 90px;
        height: 90px;
      }
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      margin-bottom: 40px;
      .sectiona-right{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-around;
        margin-left: 10px;
        p{
          font-size:24px;
          font-family:Microsoft YaHei;
          font-weight:bold;
          line-height:31px;
          color:rgba(51,51,51,1);
          opacity:1;
          span{
            margin-left: 5px;
            font-size:14px;
            font-family:Microsoft YaHei;
            font-weight:400;
            line-height:19px;
            color:rgba(15,84,188,1);
            opacity:1;
          }
        }
        .el-breadcrumb__inner{
          font-size:14px;
          font-family:Microsoft YaHei;
          font-weight:400;
          line-height:19px;
          color:rgba(102,102,102,1);
          opacity:1;
        }
      }
      
    }
    .sectiona>.sectiona_box{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      h2{
        font-size:28px;
        font-family:Microsoft YaHei;
        font-weight:bold;
        line-height:37px;
        color:rgba(51,51,51,1);
        opacity:1;
      }
      .sectiona_salary{
        font-size:21px;
        font-family:Microsoft YaHei;
        font-weight:400;
        line-height:27px;
        color:rgba(255,116,82,1);
        opacity:1;
      }
      .sectiona_btn{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        text-align: center;
        font-size:14px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(15,84,188,1);
        opacity:1;
        a:first-child{
          width:133px;
          height:42px;
          line-height: 42px;
          background:rgba(255,255,255,1);
          border:1px solid rgba(15,84,188,1);
          opacity:1;
          border-radius:2px;
          display: block;
          color:rgba(15,84,188,1);
          margin-right: 10px;
        }
        a:last-child{
          display: block;
          width:133px;
          height:42px;
          background:rgba(15,84,188,1);
          opacity:1;
          border-radius:2px;
          font-size:16px;
          font-family:Microsoft YaHei;
          font-weight:400;
          line-height:42px;
          color:rgba(255,255,255,1);
          opacity:1;
        }
      }
    }
    .sectiona>p{
      b{
        font-size:16px;
        font-family:Microsoft YaHei;
        font-weight:400;
        line-height:21px;
        color:rgba(51,51,51,1);
        opacity:1;
        margin-right: 5px;
      }
      font-size:14px;
      font-family:Microsoft YaHei;
      font-weight:400;
      line-height:17px;
      color:rgba(153,153,153,1);
      opacity:1;
      margin: 10px 0;
    }
    .sectionb{
      .breadcrumb-box{
        font-size:14px;
        font-family:Microsoft YaHei;
        font-weight:400;
        line-height:19px;
        color:rgba(102,102,102,1);
        opacity:1;
      }
      .sectionb-box-detail{
        width:1050px;
        border:1px solid rgba(240,240,240,1);
        opacity:1;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 15px 10px;
        margin: 30px 0;
        .sectionb-box-detail_item.bk{display: block;}
        .sectionb-box-detail_item{
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-around;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          p:first-child{
            width: 35%;
          }
          p:nth-child(2){
            width: 30%;
          }
          p:last-child{
            width: 35%;
          }
        }
        .sectionb-box-detail_item:last-child{
          p{
            width: 100%;
          }
        }
        p{
          font-size:14px;
          font-family:Microsoft YaHei;
          font-weight:400;
          line-height:24px;
          color:#999999;
          opacity:1;
          span{
             color:#333333;
          }
        }
      }
      h2{
        font-size:14px;
        font-family:Microsoft YaHei;
        font-weight:bold;
        line-height:21px;
        color:rgba(51,51,51,1);
        opacity:1;
        padding-left: 0px;
        margin-top: 20px;
      }
      p{
        margin-top:10px;
        padding-left:0px!important;
        font-size:14px;
        font-family:Microsoft YaHei;
        font-weight:400;
        line-height:19px;
        color:rgba(102,102,102,1);
        opacity:1;
        padding-left: 7px;
        margin-bottom: 15px;
      }
      p.last-p{
        padding-left: 0px;
        line-height: 24px;
      }
      p.p-tag{
        
        font-size:14px;
        font-family:Microsoft YaHei;
        font-weight:400;
        line-height:24px;
        color:rgba(102,102,102,1);
        opacity:1;
        .tag-item{
          font-size:12px;
          font-family:Microsoft YaHei;
          font-weight:400;
          // line-height:24px;
          color:rgba(15,84,188,1);
          opacity:1;
          margin-right: 10px;
        }
      }
    }
    .sectionb>.sectiona_box{
      display: flex;
      margin: 20px 0;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      h2{
        font-size:20px;
        font-family:Microsoft YaHei;
        font-weight:400;
        line-height:26px;
        color:rgba(51,51,51,1);
        opacity:1;
        line-height:30px;
      }
      .sectiona_btn{
        margin-left: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        text-align: center;
        font-size:14px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(15,84,188,1);
        opacity:1;
        a:first-child{
          font-size:13px;
          font-family:Microsoft YaHei;
          font-weight:400;
          line-height:30px;
          color:rgba(15,84,188,1);
          opacity:1;
          width:90px;
          height:30px;
          background:rgba(255,255,255,1);
          border:1px solid rgba(15,84,188,1);
          opacity:1;
          border-radius:2px;
        }
      }
    }
    .sectionb .sectionb_title{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      span:first-child{
          display: block;
          width: 100%px;
          padding-left: 5px;
          font-size:16px;
          font-family:Microsoft YaHei;
          font-weight:bold;
          line-height:21px;
          color:rgba(51,51,51,1);
          opacity:1;
          border-left: 2px solid rgba(38,163,247,1);;
      }
    }
  }
}
</style>
